<template>
    <div class="app-container" @keyup.enter="page" style="display: flex; flex-direction: column">
        <!--    查询项-->
        <el-drawer
            title="查询"
            :visible.sync="drawer.visible"
            :direction="drawer.direction"
            :before-close="queryClose"
            append-to-body
        >
            <div class="drawer-container">
                <el-form class="drawer-content" :model="params" label-width="100px" ref="queryForm"
                         @keyup.enter.native="page">
                    <el-row type="flex">
                        <el-col :span="12">
                            <el-form-item prop="name" label="名称">
                                <el-input v-model="params.名称" type="text" clearable show-word-limit
                                          maxlength="50"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="purpose" label="用途说明">
                                <el-input v-model="params.用途说明" type="text" clearable show-word-limit
                                          maxlength="50"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="total" label="总价格">
                                <el-input v-model="params.总价格" type="text" clearable show-word-limit
                                          maxlength="50"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item prop="remark" label="备注说明">
                                <el-input v-model="params.备注说明" type="text" clearable show-word-limit
                                          maxlength="50"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="drawer-footer">
                    <el-button @click="confirm" type="primary" size="medium">确认</el-button>
                </div>
            </div>
        </el-drawer>
        <div class="z-position">
            <div class="z-position_left">
                <el-button type="primary" size="small" @click="handleInsert">新增</el-button>
                <el-button type="danger" size="small" @click="handleDel">删除</el-button>
            </div>
            <div class="z-position_right">
                <el-button type="primary" icon="el-icon-search" size="medium" @click="page">查询</el-button>
                <el-button type="primary" icon="el-icon-refresh" size="medium" @click="reset">重置</el-button>
                <el-button circle icon="el-icon-d-arrow-left" @click="showSearch"></el-button>
            </div>
        </div>
        <!--    表格-->
        <el-table :data="table.data" ref="table" border fit stripe @row-click="handleRowClick"
                  @selection-change="handleSelectionChange">
            <el-table-column type="selection"/>
            <el-table-column prop="name" label="名称"/>
            <el-table-column prop="purpose" label="用途说明"/>
            <el-table-column prop="total" label="总价格"/>
            <el-table-column prop="remark" label="备注说明"/>
            <el-table-column label="操作" width="120px" fixed="right">
                <template #default="scope">
                    <!--           阻止冒泡-->
                    <div @click.stop>
                        <el-button @click="handleEdit(scope)" type="text">修改</el-button>
                        <el-button @click="handleDetail(scope)" type="text">详情</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            layout="sizes,total,prev, pager, next"
            @size-change="page"
            :page-sizes="[10, 20, 50, 100]"
            :total="pagination.total"
            :current-page.sync="pagination.pageOn"
            @current-change="page"
            @prev-click="page"
            @next-click="page"
            :page-size.sync="pagination.pageSize"
            style="flex-basis: 32px; flex-grow: 0;flex-shrink: 0;text-align: center"
            width="100"
        />
        <!--    弹窗-->
        <el-dialog :title="formDialog.title" :visible.sync="formDialog.visible" append-to-body :before-close="formClose">
            <el-form :model="formData" label-width="80px" ref="form" :rules="rules">
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="name" label="名称">
                            <el-input v-model="formData.name" type="text" clearable style="width:80%;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="purpose" label="用途说明">
                            <el-input v-model="formData.purpose" type="text" clearable style="width:80%;"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="remark" label="备注说明">
                            <el-input v-model="formData.remark" type="text" clearable style="width:80%;"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <el-button @click='formSave' type="primary">保存</el-button>
                <el-button @click="formClose">关闭</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script src="./index.js">
</script>

<style scoped>
.z-position{
    height: 54px;
    line-height: 54px;
    margin-bottom: 20px;
}
.z-position_left{
    width: 50%;
    float: left;
}
.z-position_right{
    width: 50%;
    float: left;
    text-align: right;
}
</style>
